@import "./base";
.order-top
    padding 40px 30px 0
    > ul 
        border-bottom color-border
        display flex
        padding 0 58px 40px
        background url('/public/b1.png') no-repeat center 98px

        &.bg2
            background-image url('/public/b2.png')
        &.bg3
            background-image url('/public/b3.png')
        &.bg4
            background-image url('/public/b4.png')
        &.bg5
            background-image url('/public/b5.png')
        &.bg6
            background-image url('/public/b6.png')
        li 
            flex 1
            text-align center
            > i 
                display block
                margin 0 auto
                width 60px
                height 68px
                background-repeat no-repeat
            .icon1
                background-image url('/public/y1.png')
                &.active
                     background-image url('/public/y1_ac.png')

            .icon2
                background-image url('/public/y2.png')
                &.active
                     background-image url('/public/y2_ac.png') 

            .icon3
                background-image url('/public/y3.png')
                &.active
                     background-image url('/public/y3_ac.png')

            p:nth-of-type(1)
                height 30px
                line-height 30px
                font-size 10px
                //color #fff
                &:active
                    color color-yellow
            p:nth-of-type(2)
                padding-top 60px
                height size3
                line-height size3
                color color3
                font-size size3
                
            time
                display block
                margin 10px auto 0
                height 10px 
                line-height 10px
                font-size 10px
                color #fff
                &.active
                    color #a5a5a5

.order_detail_main
    > h4 
        padding 18px 0
        height size3
        line-height size3
        font-size size3
        color color-red
    > ul 
        width 440px
        margin 0 auto 40px
        li 
            position relative
            display flex 
            height 40px
            line-height 40px
            padding-left 40px

            &:after
                content ""
                position absolute
                top 16px
                left 16px
                background-color color-yellow
                width 8px
                height 8px
                border-radius 50%
            span
                display block
                text-align center
                font-size size3
                color color3
                &:nth-child(1) 
                    width 120px
                &:nth-child(2) 
                    width 280px


.order_detail_cell
    display flex 
    justify-content space-between
    padding-bottom 40px
    border-bottom color-border

    > div
        width 400px
        height 240px
        border-radius 5px
        box-shadow 0 0 12px rgba(0,0,0,0.1)
        text-align center
        font-size size3
        color color3
        padding-top 20px

        h5 
            width 65px
            margin 0 auto 20px
            height 26px
            line-height 26px
            font-size size3
            color color3
            border-bottom 4px solid color-yellow

        p 
            display flex 
            padding 0 45px
            height 40px
            line-height 40px
            span 
                display block
                &:nth-child(1)
                    width 80px
                &:nth-child(2)
                    width 220px

        &:nth-child(2) h5
            margin-bottom 40px


.order_detail_table
    margin 22px auto 40px
    border-top color-border
    border-left color-border

    > li
        display flex
        > span
            display block
            height 40px
            line-height 40px
            text-align center
            color color3
            font-size size3
            border-right color-border
            border-bottom color-border
            &:nth-child(1)
                width 300px
                white-space:nowrap
                overflow:hidden
                text-overflow:ellipsis
                padding 0 5px 0 5px
            &:nth-child(2),
            &:nth-child(3),
            &:nth-child(4)
            &:nth-child(5)
                flex 1

            &:nth-child(2),
            &:nth-child(4)
                background-color #e6effc


.order-detail-bottom
    position relative
    height 320px
    margin 0 auto -10px
    background-color #e5e5e5

    > a
        position absolute
        top 50%
        margin-top -35px
        width 30px
        height 70px
        background-repeat no-repeat

    .left 
        left 10px
        background-image url('/public/arrow_l.png')
        &:hover
            background-image url('/public/arrow_l_ac.png')
    .right 
        right 10px
        background-image url('/public/arrow_r.png')
        &:hover
            background-image url('/public/arrow_r_ac.png')